<template>
  <div class="detail-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <BasicInfo />
      </el-tab-pane>
      <el-tab-pane label="文档维护" name="second">
        <Document />
      </el-tab-pane>
      <el-tab-pane label="图片维护" name="third">
        <Pictures />
      </el-tab-pane>
      <el-tab-pane label="配套产品" name="fourth">
        <Relationship />
      </el-tab-pane>
    </el-tabs>

    <div class="current-product-type">
      当前型号：xxxx
    </div>

    <span class="icon-back" @click="$router.go(-1)"></span>
  </div>
</template>

<script>
  import BasicInfo from './basicInfo'
  import Document from './document'
  import Pictures from './pictures'
  import Relationship from './relationship'
  export default {
    data () {
      return {
        activeName: 'first'
      }
    },
    components: {
      BasicInfo,
      Document,
      Pictures,
      Relationship
    },
    computed: {

    },
    watch: {

    },
    created () {

    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }
</script>

<style scoped>
  .el-tabs >>> .el-tabs__item {
    font-size: 16px;
  }

  .detail-container {
    position: relative;
  }

  .current-product-type {
    position: absolute;
    top: 20px;
    right: 0;
    font-size: 18px;
    color: #404040;
  }

  .icon-back {
    display: inline-block;
    width: 26px;
    height: 26px;
    position: fixed;
    top: 70px;
    right: 24px;
    background: url(../../../../../assets/img/icons/icon-back.png) no-repeat;
    background-size: contain;
    cursor: pointer;
  }
</style>
